<template>
    <div class="hotel-main">
        <div>
            <div class="d-flex justify-content" style="padding: 10px;">
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">审核状态:</p>
                    <el-select v-model="status" placeholder="请选择" style="width: 350px;">
                        <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="userValue == 'check'">
                        </el-option>
                    </el-select>
                </div>
                <div class="ml-10 mr-10 d-flex align-items-center">
                    <p class="mr-5" style="width: 70px;font-size: 14px">昵称:</p>
                    <el-input
                            placeholder="请输入昵称"
                            prefix-icon="el-icon-search"
                            clearable
                            v-model="nickname">
                    </el-input>
                </div>

                <el-button type="primary" @click="getUserList" size="small" >查询</el-button>
                <el-button type="warning"  @click="resetForm" size="small" >重置</el-button>
            </div>
<!--            <div class="d-flex justify-content-end" style="padding: 10px;">-->
<!--                <el-button type="primary" style="width: 100px;" @click="addUser">添加</el-button>-->
<!--            </div>-->

            <el-table
                    stripe
                    size="small "
                    :data="hotelData"
                    style="width: 100%"
                    border>
                <el-table-column
                        type="index"
                        label="序号"
                        width="60"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="nickname"
                        label="昵称">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="电话">
                </el-table-column>
                <el-table-column
                        prop="idCard"
                        label="证件号">
                </el-table-column>
                <el-table-column
                        prop="reason"
                        label="原因">
                </el-table-column>
                <el-table-column
                        prop="location"
                        label="位置">
                </el-table-column>
                <el-table-column  label="图片">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="" trigger="hover">
                            <img :src="scope.row.photo" alt="" style="width: 350px;height: 350px">
                            <img slot="reference" :src="scope.row.photo" style="width: 35px;height: 35px">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="是否审核">
                    <template scope="scope">
                        {{ statusOptions[scope.row.status].label }}
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="240"
                        align="center">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleCheck(scope.$index, scope.row)">查看
                        </el-button>
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleModify(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>


        <el-pagination
                class="mb-15"
                background
                @current-change="handleCurrentChange"
                @prev-click="prevPage"
                @next-click="nextPage"
                layout="prev, pager, next"
                :total="pageNum">
        </el-pagination>


        <!-- 弹出框 -->
        <el-dialog
                :title="title"
                :visible.sync="dialogVisible"
                width="570px">
            <div class="content">
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">昵称:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入昵称"
                            v-model="form.nickname"
                            :disabled="userValue == 'check'"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">证件号:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入证件号"
                            v-model="form.idCard"
                            :disabled="userValue == 'check'"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">手机号:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入手机号"
                            v-model="form.phone"
                            :disabled="userValue == 'check'"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">报修原因:</p>
                    <el-input
                            style="width: 350px;"
                            type="textarea"
                            placeholder="请输入原因"
                            v-model="form.reason"
                            :disabled="userValue == 'check'"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">具体位置:</p>
                    <el-input
                            style="width: 350px;"
                            placeholder="请输入具体位置"
                            v-model="form.location"
                            :disabled="userValue == 'check'"
                            clearable>
                    </el-input>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">图片:</p>
                    <el-image
                            style="width: 100px; height: 50px"
                            :src="form.photo"
                            :preview-src-list="[form.photo]">
                    </el-image>
                </div>

                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">审核:</p>
                    <el-select v-model="form.status" placeholder="请选择" style="width: 350px;">
                        <el-option
                                v-for="item in statusOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                                :disabled="userValue == 'check'">
                        </el-option>
                    </el-select>
                </div>
                <div class="d-flex align-items-center mb-15">
                    <p class="w-100 text-left">审核理由:</p>
                    <el-input
                            type="textarea"
                            style="width: 350px;"
                            placeholder="请输入审核理由"
                            v-model="form.refuseReason"
                            :disabled="userValue == 'check'"
                            clearable>
                    </el-input>
                </div>


            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirm" v-if="userValue != 'check'">确 定</el-button>
        </span>
        </el-dialog>

    </div>

</template>

<script>
    import {get, post} from "../utils/request";

    export default {
        name: "RepairManager",
        data() {
            return {
                username: undefined,
                nickname: undefined,
                deptList: undefined,
                status:'',
                statusOptions:[{
                    value: 0,
                    label: '待审核'
                },{
                    value: 1,
                    label: '审核通过'
                },
                    {
                        value: 2,
                        label: '拒绝'
                    }],
                name: '',
                address: undefined,
                hotelData: [],
                title: '',
                page: '',
                departData: '',
                hotelName: '',
                hotelAddress: '',
                userValue: '',
                hotelId: '',
                deptId: '',
                parking: '',
                pageNum: 0,
                dialogVisible: false,
                userList: [],
                tempPassword: undefined,
                form: {
                    id: '',
                    status: 0,
                    nickname: '',
                    username: undefined,
                    phone: undefined,
                    idCard:'',
                    carNo:'',
                    location:'',
                    reason:'',
                    refuseReason:'',
                    photo:''
                }
            }
        },
        filters: {
            mapFormat(val, map) {
                console.log("11111",val)
                console.log(map)
                return map[val]
            }
        },
        methods: {
            //获取用户列表
            getUserList() {
                let data = {
                    page: {
                        page: 1,
                        size: 10
                    },
                    status:this.status,
                    nickname: this.nickname
                }
                let dept = {}
                //获取用户列表
                this.userListRequest(data)
            },

            //获取用户列表请求
            userListRequest(data) {
                post('/api/repair/allPage', data)
                    .then(res => {
                        console.log(res);
                        this.hotelData = res.data.data.records
                        this.pageNum = res.data.data.total
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },

            //删除用户方法
            handleDelete(index, row) {
                get('/api/user/delete/' + row.id)
                    .then(res => {
                        console.log(res);
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration: 1000
                        });
                        setTimeout(() => {
                            this.$router.go(0)
                        }, 1000)
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },

            getDeptList() {
                let data = {
                    page: {
                        page: 1,
                        size: 9999999
                    },
                }
                // post("/api/dept/list", data).then(res => {
                //     this.deptList = this.getTreeData(res.data.data)
                //     // console.log(this.deptList)
                // })
                // post("/api/dept/page", data).then(res => {
                //     let list = res.data.data.records
                //     // console.log("list===",list)
                //     list.forEach(row => {
                //         // console.log("listitem===",row)
                //         this.deptMap[row.id] = row.name
                //     })
                //     // console.log("deptmap===",this.deptMap)
                // })

            },
            resetForm(){
                this.username= ''
                this.nickname= undefined
                let data = {
                    page: {
                        page: 1,
                        size: 10
                    },
                    username: this.username,
                    nickname: this.nickname
                }
                let dept = {}
                //获取用户列表
                this.userListRequest(data)
            },



            cascaderClick(nodeData) {
                this.addrCode = nodeData.id;
                this.$refs.cascader.checkedValue = nodeData.id;
                this.$refs.cascader.computePresentText();
                this.$refs.cascader.toggleDropDownVisible(false);
                this.$message({
                    message: '已选择：' + nodeData.name,
                    type: 'success',
                    duration: 1000
                });
            },

            //增加用户方法
            addUser() {
                this.form = {}
                this.dialogVisible = true
                this.title = '添加用户'
                this.userValue = 'add'
                this.getUserList()
            },

            handleCheck(index, row) {
                this.userValue = 'check'
                this.dialogVisible = true
                this.title = '查看用户信息'
                this.form = row
            },

            //修改用户信息
            handleModify(index, row) {
                console.log(index);
                console.log(row);
                this.form = row
                this.tempPassword = this.form.password
                this.dialogVisible = true
                this.title = '修改用户信息'
                this.userValue = 'modify'
            },

            //
            confirm() {
                let value = this.userValue
                let data = {
                    id: undefined,
                    status: this.form.status,
                    refuseReason: this.form.refuseReason,
                }
                if (value == 'add') {
                    this.userRequest(value, data)
                } else if (value == 'modify') {
                    data.id = this.form.id
                    if (this.tempPassword == this.form.password) {
                        this.form.password = undefined
                    }
                    // data.deptId = this.deptId
                    this.userRequest(value, data)
                }
            },

            //请求方法
            userRequest(url, data) {
                post('/api/repair/' + url, data)
                    .then(res => {
                        console.log(res);
                        if (res.data.code === "200") {
                            this.$message({
                                message: '操作成功！',
                                type: 'success',
                                duration: 1000
                            });
                            this.$router.go(0);
                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'warning',
                                duration: 1000
                            });

                        }
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },

            //选择页码
            handleCurrentChange(num) {
                let data = {
                    page: {
                        page: num,
                        size: 10
                    },
                    username: this.username,
                    nickname: this.nickname
                }
                this.userListRequest(data)
            },

            //上一页
            prevPage(num) {
                let data = {
                    page: {
                        page: num,
                        size: 10
                    },
                    username: this.username,
                    nickname: this.nickname
                }
                this.userListRequest(data)

            },

            //下一页
            nextPage(num) {
                let data = {
                    page: {
                        page: num,
                        size: 10
                    },
                    username: this.username,
                    nickname: this.nickname
                }
                this.userListRequest(data)
            },


        },
        created() {
            this.getDeptList()
        },
        mounted() {

            this.getUserList()
        },

    }
</script>

<style scoped>
    .hotel-main {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        height: 100%;
        background: #FFFFFF;
        box-shadow: 0px 5px 30px 0px rgba(22, 115, 255, 0.1);
    }
</style>
